// 首页
<template>
  <div class="u_index">
    <div class="tologin-body">
      <div class="tologin"><router-link to="/login">登录  |  注册</router-link></div>
    </div>

    <div class="u_search">
      <div class="search">
        <el-input
          class="search_input"
          v-model="str"
          placeholder="请输入职位或公司名称"
        ></el-input>
        <el-button class="search_button" @click="getJobByStr" type="primary"
          >search</el-button
        >
      </div>
    </div>
    <div class="zhiwei">
      <div class="zhiwei_head">为你推荐</div>
      <div class="zhiwei_content">
        <el-card
          class="box-card card-boder"
          v-for="i in jobList"
          :key="i.id"
          shadow="hover"
        >
          <div slot="header" class="clearfix">
            <span>{{ i.job }}</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="look(i.id)"
              >查看详情</el-button
            >
          </div>
          <div class="text item">薪资￥：{{ i.sallow }}-{{ i.salhi }}/月</div>
          <div class="text item">入职要求：{{ i.experience }}</div>
          <div class="text item">工作内容：{{ i.description }}</div>
          <div class="comName">{{ i.comName }}科技有限公司</div>
        </el-card>

        <el-dialog title="投一波" :data="jodInfo" :visible.sync="dialogVisible">
          <span>入职要求：{{ jodInfo.experience }}</span
          ><br /><br />
          <span>工作内容：{{ jodInfo.description }}</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">不感兴趣</el-button>
            <el-button type="primary" @click="tuo(jid)">我要投它</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<style>
.tologin-body {
  background: #f2f5f4;
  width: 100vw;
}
.tologin {
  background: #f2f5f4;
  width: 150px;
  margin-left: calc(100vw - 150px);
  color: #409eff;
}
.u_index {
  width: 100%;
  /* height: 100vh; */
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
}
.u_search {
  width: 100vw;
  height: 111px;
  /* position: absolute; */
  background-color: #f2f5f4;
  /* border: 1px solid #cccc; */
}
.search {
  width: 800px;
  height: 50px;
  margin: 30px calc(50vw - 400px);
  border: 1px solid #409eff;
  border-radius: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search_input {
  width: 675px;
  margin-left: 15px;
  border-radius: 25px;
}
.search_button {
  width: 110px;
  height: 50px;
  font-size: 20px;
  border-radius: 0 25px 25px 0;
}
.zhiwei {
  width: 1200px;
  margin: 0px calc(50vw - 600px);
}
.zhiwei_head {
  width: 1200px;
  height: 35px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
  line-height: 35px;
  vertical-align: center;
  cursor: pointer;
}
.zhiwei_content {
  width: 1200px;
  /* height: 645px; */
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: flex-start;
}
.zhiwei_item {
  width: 378px;
  height: 200px;
  margin-top: 15px;
  margin-left: 15px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.zhiwei_item:hover {
  box-shadow: 1px slategrey;
}
.card-boder {
  border: 1px solid #ccc;
}
.comName {
  border-top: 0.5px dashed #999;
}
.el-dialog {
  width: 400px;
  height: 500px;
}

.text {
  font-size: 14px;
}

.item {
  height: 30px;
  overflow: hidden;
  /*内容超出后隐藏*/
  text-overflow: ellipsis;
  /* 超出内容显示为省略号*/
  white-space: nowrap;
  /*文本不进行换行*/
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 378px;
  height: 200px;
  margin: 10px 10px;
}
</style>
<script>
export default {
  data() {
    return {
      str: "",
      dialogVisible: false,
      jobList: [],
      jodInfo: {},
      jid: null,
    };
  },
  methods: {
    //搜索
    getJobByStr() {
      console.log(this.str);
      var url = this.$store.state.ip + "/job/getJobByStr";
      // 参数
      let str = this.str;
      let param = new URLSearchParams();
      param.append("str", str);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log(res.data);
        this.jobList = res.data;
      });
    },
    //查找具有权重的职位
    getJobByUser() {
      var url = this.$store.state.ip + "/job/selectByWit";
      // 参数
      // let param = new URLSearchParams();

      this.$axios({
        method: "post",
        url: url,
        //   data: param,
      }).then((ss) => {
        this.jobList = ss.data;
        console.log(this.jobList);
      });
    },

    look(jid) {
      this.jid = jid;
      this.dialogVisible = true;
      var url = this.$store.state.ip + "/job/getJobInfo";
      // 参数
      let param = new URLSearchParams();
      param.append("id", jid);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        this.jodInfo = res.data;
      });
    },
    // 投简历
    tuo(jid) {
      this.$router.push("/login");
    },
  },
  beforeMount() {
    this.getJobByUser();
  },
};
</script>